import React, { useCallback }   from 'react';
import { View, Text, StyleSheet, Image, ScrollView , TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

const AboutApp = ({ navigation }) => {
  const goBack = useCallback(() => {
    navigation.goBack();
  }, [navigation]);

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <View style={styles.header}>
            <TouchableOpacity onPress={() => navigation.goBack()}>
            <Icon name="angle-left" size={28} color="#333" />
            </TouchableOpacity>
            <Text style={styles.headerTitle}>关于 爱特书海阁</Text>
          <View style={{ width: 28 }} />
      </View>
      <View style={styles.content}>
        <Text style={styles.text}>欢迎来到爱特书海阁</Text>
        <Text style={styles.text}>这里是书籍爱好者的天堂</Text> 
        <Text style={styles.text}>我们提供丰富的书籍资源</Text>
        <Text style={styles.text}>让您随时随地享受阅读的乐趣</Text>
        <Text style={styles.text}>版本 1.0.0</Text>
        <Text style={styles.text}>版权所有 © 2025 爱特书海阁</Text>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  header: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 15,
        paddingTop: 40,
        paddingBottom: 10,
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
        justifyContent: 'space-between',
    },
  headerTitle: { fontSize: 20, fontWeight: 'bold', color: '#333' },
  content: {
    top:20,
    flex: 1,
    alignItems: 'center',
    textAlign: 'center', 
    justifyContent: 'center',
    width: '100%',
  },
  text: {
    fontSize: 22,
    flex: 0.06,
    color: '#333',
    marginBottom: 5,
    textAlign: 'center',
    alignItems: 'center',
  }
});

export default AboutApp;